<template>
    <div class="flex my-1 border-blue-400 cursor-pointer">
        <el-tag size="small" closable class="ml-1"
                effect="plain"
                v-for="(route,index) in routes"
                :key="index"
                @click="$router.push(route)"
                @close="handleClose(route)"
                :type="route.name==$route.name?'success':'info'"
        >
            <span v-show="route.name==$route.name">▪</span>
            {{ route.title }}
        </el-tag>
    </div>
</template>

<script>
export default {
    props: {
        num: {type: Number, default: 10},
    },
    data() {
        return {
            routes: []
        }
    },
    watch: {
        $route(route) {
            if (route.meta.title && !Object.keys(route.params).length && !Object.keys(route.query).length) {
                const has = this.routes.some(r => r.name == route.name)
                if (!has) {
                    this.routes.push({name: route.name, title: route.meta.title})
                    if (this.routes.length > this.num) {
                        this.routes.shift()
                    }
                }
            }
        }
    },
    methods: {
        handleClose(route) {
            this.routes.splice(this.routes.indexOf(route), 1);
        }
    }
}
</script>

<style scoped>

</style>
